<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for="(v, index) of list" :key="index">{{v}}</li>
    </ul>
    {{userStore}}
    <div> 国际化： {{message}} </div>
    <div>其他组件语言： {{locale}}</div>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
import {userStore} from "@/store"
export default {
  name: "HelloWorld",
  props: {
    msg: String,
    name: String,
  },
  data(){
    return {userStore}
  },
  setup(props) {
    const list = ref([1, 2, 3, 4, 5]);
    watchEffect(() => {
      console.log(`msg is: ` + props.msg);
    });
    watchEffect(() => {
      console.log(`name is: ` + props.name);
    });
    return { list };
  },
};
</script>